OpenStreetMap tiles for Leaflet, Mapbox/MapLibre GL, OpenLayers
Vector and raster Map Tiles for beautiful interactive maps. Our Map Tiles are suitable for base-map layers in map rendering libraries and frameworks, including Leaflet, MapLibre GL (an open-source fork of Mapbox GL), and OpenLayers. Pricing plans start with a Free plan that allows you to make up to 12,000 map tile requests/day (or 360,000 requests/month) across the world. If you need more, you can choose between several pricing plans according to your needs.
Six million contributors worldwide make OpenStreetMap the world’s biggest geodata source. So the OSM-based tiles are the most accurate, up-to-date, and feature-rich.
In addition, with open data sources, we can provide open tiles to you. So you can cache, store, and redistribute the generated tiles.
Six million contributors worldwide make OpenStreetMap the world’s biggest geodata source. So the OSM-based tiles are the most accurate, up-to-date, and feature-rich.
In addition, with open data sources, we can provide open tiles to you. So you can cache, store, and redistribute the generated tiles.
Vector map tiles are transferred as PBFs and rendered on an end-user device. You have complete control over vector-based maps. So you can change map language, map visualization settings, and styling, even dynamically. Our OSM vector tiles format is compatible with Mapbox Vector Tiles natively supported by MapLibre GL map library.
Vector and raster both have their advantages. The best one for you depends on what you're focusing on.
From one side, raster tiles are optimized for fast rendering and browsing. On the other side,
vector tiles are much more customizable
. To better understand the differences check our article "Raster vs. vector: pros and cons of both map tile types. "
In addition to map tiles for interactive maps, we provide an API that generates map pictures - Static Map API. This makes it easy for a classic desktop application to add a map view.
To generate a map image, you only need to
specify the map style, map center, optionally add markers of your choice, and voila!
You can find ready-to-use code samples for each map style on the documentation page. In addition, you can use our interactive Maps Playground to check available styles and options. Below we provide code snippets showing how to add a map tile layer into Leaflet map and how to draw vector tiles with Mapbox GL (we use its community-driven fork MapLibre GL). You'll need to get an API key to build a map with Geoapify. Head over to the Getting Started with Maps API page to get your API key.
npm install leaflet
In addition, you can add types for TypeScript projects with:
npm install --save-dev @types/leaflet
Then you can import the Leaflet objects in the code:
import { control, latLng, map, tileLayer, Browser, ... } from 'leaflet';
<link rel="stylesheet " href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css " />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js "></script>
You'll need to use a raster map tile URL to create a map with Leaflet. To add a new layer of tiles to a map, you first create a map container and then add the tile layer:
HTML
<div id="my-map "></div>
CSS
html,
body,
#my-map {
width: 100%;
height: 100%;
margin: 0;
}
JAVASCRIPT
// create a map
const map = L.map('my-map').setView([48.1500327, 11.5753989], 10);
// Retina displays require different mat tiles quality
const isRetina = L.Browser.retina;
const baseUrl = "https://maps.tmaps.tn/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey} ";
const retinaUrl = "https://maps.tmaps.tn/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey} ";
// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
attribution: 'Powered by <a href="https://www.tmaps.tn/ " target="_blank ">Geoapify</a> | <a href="https://openmaptil>
MapLibre GL is a community-supported fork of Mapbox GL under the BSD-3-Clause license, which is safe for commercial projects and businesses. MapLibre GL works with vector map tiles and allows you to customize map styles for your project - change colors and fonts, localize maps, add/hide information on a map.
npm i maplibre-gl
The library package includes types, so there is no need to install them separately for TypeScript projects. You can import MapLibre GL's typings in you files this way:
npm install --save-dev @types/leaflet
Then you can import the Leaflet objects in the code:
import { LngLatBounds, Map, Marker, Popup } from 'maplibre-gl';
<script type="text/javascript" src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css">
Use the Map style link to create a vector basemap layer in MapLibre GL. The style definition contains all required attribution, zoom settings, and other map options.
HTML
<div id="my-map"></div>
CSS
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
JAVASCRIPT
const map = new maplibregl.Map({
container: 'my-map',
style: `https://maps.tmaps.tn/v1/styles/klokantech-basic/style.json?apiKey=YOUR_API_KEY`,
});
map.addControl(new maplibregl.NavigationControl());